.bg{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: auto;
    .Firstindexcontent{
        position: relative;
        display: flex;
        flex-direction: column;
        .head{
            position: relative;
            width: 100%;
            min-width: 1200px;
            background-size: cover;
            height: 98px;
            margin: 0 auto;
            background-position-y: bottom;
            background-repeat: no-repeat;
            p{
                position: absolute;
                top: 20px;
                left: 37%;
            }
            .Readhead-search{
                position: absolute;
                left: 15px;
                top: 40px;
                height: 50px;
                line-height: 50px;
                // background-color: rgba(255, 255, 255, 0.8);
                ul{
                  display: flex;
                  li{
                    margin-right: 10px;
                    a{
                      background-color: rgb(159, 201, 220);
                      padding: 5px;
                      font-size: 16px;
                      border-radius: 10px;
                    }
                  }
                }
              }
        }
        .count{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            padding: 0 15px 30px 10px;
            margin-top: 5px;
            .left{
                width: 65%;
                display: flex;
                cursor: default;
                .station{
                    width: 150px;
                    margin-right: 15px;
                    padding: 20px 5px;
                    font-size: 18px;
                    background-color: rgba(255, 255, 255, 0.8);
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
                        .nei{
                            padding: 5px;
                            border-radius: 5px;
                            font-size: 16px;
                        }
                        .jianjie{
                            color: white;
                            padding:1px 5px;
                            position: relative;
                            &::after{
                                content: '';
                                display: block;
                                position: absolute;
                                top: 0;
                                right: -40px;
                                width: 40px;
                                height: 27px;
                                background: linear-gradient(to right, #1a77a5 0%, transparent 100%);
                              }
                            background-color: #1a77a5;
                        }
                }
                .user{
                    flex: 1;
                    padding: 20px;
                    background-color: rgba(255, 255, 255, 0.8);
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
                    display: flex;
                    flex-direction: column;
                    .user-header{
                        width: 100%;
                        height: 70px;
                        border-radius: 10px;
                        margin-bottom: 10px;
                        background-repeat: no-repeat;
                        ul{
                            display: flex;
                            align-items: center;
                            font-size: 18px;
                            color: #000;
                            .h-img{
                                display: inline-block;
                                width: 60px;
                                height: 60px;
                                // background-color: rgb(68, 223, 148);
                                border-radius: 30px;
                                vertical-align: middle;
                            }
                            .hello{
                                font-style: italic;
                                padding: 1px 5px;
                                border-radius: 5px;
                            }
                            li:nth-child(2){
                                margin: 0 30px 0 10px;
                            }
                        }
                    }
                    .user-content{
                        width: 100%;
                        ul{
                            display: flex;
                            justify-content: space-around;
                            text-align: center;
                            margin-top: 30px;
                            li{
                                height: 100px;
                                // border: 1px solid pink;
                                background-color: rgb(255, 246, 216);
                                display: flex;
                                padding: 5px;
                                font-size: 16px;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                position: relative;
                                i{
                                    position: absolute;
                                    top: -13px;
                                    left: -13px;
                                    border-radius: 10px;
                                    color: #1b1b1b;
                                    background-color: rgb(255, 246, 216);
                                    font-size: 20px;
                                    padding: 5px;
                                    transform: rotateZ(95deg);
                                }
                                p{
                                    width: 76px;
                                    height: 40px;
                                    text-align: center;
                                    line-height: 28px;
                                    margin-top: 10px;
                                    font-size: 35px;
                                    padding: 5px;
                                    font-weight: 700;
                                    color: rgb(59, 66, 85);
                                    // background-color: rgb(255, 246, 216);
                                    border-radius: 20px;
                                }
                            }
                        }
                    }
                }
            }
            .right{
                width: 33%;
                position: absolute;
                top: 65px;
                right: 10px; 
                .journal{            
                    height: 400px;           
                    padding: 5px;
                    overflow: auto;
                    background-color: rgba(255, 255, 255, 0.8);
                                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
                    ul{
                        padding: 20px 5px 10px 10px;
                        font-size: 16px;
                        li{
                            margin-bottom: 10px;
                            .time{
                                display: inline-block;
                                width: 160px;
                            }
                            i{
                                display: inline-block;
                                width: 15px;
                                height: 9px;
                                border-radius: 9px;
                                margin-right: 26px;
                            }  
                        }
                    }
                }
                .at{
                    padding: 5px;
                    height: 200px;
                    background-color: rgba(255, 255, 255, 0.8);
                                        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
                    margin-top: 15px;
                }
            }     
            .Guanqia{
                width: 65%;
                margin: 20px 0 20px 0;
                background-color: rgba(255, 255, 255, 0.8);
                                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
                padding: 10px;
                display: flex; 
                cursor: pointer;
                .GuanqiaLeft{
                    width: 40%;
                    h5{
                        margin: 10px 0 20px 10px;
                    }
                    .subject{
                        padding-left: 10px;
                        font-size: 16px;
                        li{
                            margin-bottom: 25px;
                            // display: flex;
                            font-weight: 500;
                            // justify-content: space-between;
                            padding-right: 10px;
                            span{
                                margin-left: 20px;
                                color: rgb(109, 106, 106);
                            }
                        }
                    }
                }
                .GuanqiaRight{
                    width: 60%;
                    padding-bottom: 5px;
                    cursor: pointer;
                    .progress{
                        display: flex;  
                        align-items: center;
                        margin-bottom: 15px;
                        .progressLeft{
                            width: 65%;
                            margin-right: 10px;
                            font-size: 16px;
                            p{
                                margin-bottom: 5px;
                            }
                        }
                        .progressRight{
                            font-size: 16px;
                        }
                    }
                }   
            }
            .Project{
                width: 65%;
                background-color: rgba(255, 255, 255, 0.8);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
                padding: 5px 5px 20px 5px;
                display: flex;
                min-height: 200px;
                .ProjectLeft{
                    width: 40%;
                    padding: 0 10px;
                    cursor: pointer;
                    h4{
                        margin: 5px 5px 10px 5px;
                    }
                    .ProjectLeftUl{
                        font-weight: 500;
                        border-right: 1px solid #ccc;
                        padding-right: 20px;
                        li{
                            position: relative;
                            padding: 10px  5px 5px 10px;
                            font-size: 18px;
                            margin-bottom: 10px;
                            border-bottom: 1px solid #ccc;
                            span{
                                position: absolute;
                                font-size: 14px;
                                top: 20px;
                                color: rgb(99, 97, 97);
                                right: 0;
                            }
                        }
                    }
                }
                .ProjectRight{
                    width: 60%;
                    display: flex;
                    .left{
                        width: 40%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        .counts{
                            font-size: 40px;
                            font-weight: 700;
                            color:rgb(27, 26, 26) ;
                        }
                        .lookbtn{
                            padding: 5px 10px;
                            background-color: rgb(46, 68, 212);
                            font-size: 14px;
                            border-radius: 15px;
                            a{
                                color: white;
                            }
                            i{
                                background-color: rgb(8, 19, 92);
                                width: 20px;
                                height: 20px;
                                color: white;
                                text-align: center;
                                line-height: 20px;
                                border-radius: 10px;
                            }
                        }   
                    }
                    .rights{
                        width: 60%; 
                    }
                }
            }
        }
    }
    .Background {
        position: absolute;     
        top: 0;      
        left: 0;     
        width: 100%;   
        height: 100%;  
        z-index: 98;   
        background-color: rgba(0, 0, 0, 0.5);
    }
}
